<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>富文本编辑器</title>
	<link rel="stylesheet" href="/static/component/layui/css/layui.css" />
	<link rel="stylesheet" href="/static/admin/css/pearForm.css" />
	<link href="/static/admin/css/pearSelect.css" rel="stylesheet" />
	<link rel="stylesheet" href="/static/blog/editor/css/editormd.css"/>

	<style>
		body{margin: 10px;}
	</style>
</head>
<body class="layui-bg-gray">
<div >
	<div class="layui-row layui-col-space12">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">文章属性</div>
				<div class="layui-card-body">
					<form class="layui-form" action="" lay-filter="component-form-element">

						<div class="layui-row layui-col-space12 layui-form-item">
							<div class="layui-col-lg3">
								<label class="layui-form-label">标题：</label>
								<div class="layui-input-block">
									<input type="text" name="title" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="layui-col-lg3">
								<label class="layui-form-label">类别：</label>
								<div class="layui-input-block">
									<select name="classify" lay-verify="required" lay-filter="classify">
										<<< range .Classify >>>
										<option value="<<<.Id>>>"> <<<.Name>>> </option>
										<<< end >>>
									</select>
								</div>
							</div>
						</div>

						<div class="layui-row layui-col-space12 layui-form-item">
							<div class="layui-col-lg6">
								<label class="layui-form-label">标签：</label>
								<div class="layui-input-block">
									<select name="targets" xm-select="select1"></select>
								</div>
							</div>
						</div>

						<div class="layui-row layui-col-space12 layui-form-item">
							<div class="layui-col-lg6">
								<label class="layui-form-label">其他属性：</label>
								<input type="checkbox" name="recommend" title="推荐">
								<input type="checkbox" name="comment" title="评论">
							</div>
						</div>
						<div class="layui-row layui-col-space12 layui-form-item">

							<div class="layui-col-lg6">
								<label class="layui-form-label">简介：</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea" name="introduce" id="introduce-edit" placeholder=""></textarea>
								</div>
							</div>
						</div>

						<div class="layui-form-item" style="margin-left: 110px" id="test-editormd">
							<textarea name="content" placeholder=""></textarea>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="component-form-element">保存草稿</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>
</div>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/blog/jquery-3.1.1.min.js"></script>
<script src="/static/blog/editor/editormd.min.js"></script>

<script type="text/javascript">
	$(function() {
		var testEditor = editormd("test-editormd", {
			width: "80%",
			height: 500,
			markdown : "",
			path : '/static/blog/editor/lib/',
			//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为 true
			//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
			//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
			//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
			//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
			imageUpload : true,
			imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL : "/api/admin/resource/upload",

			/*
             上传的后台只需要返回一个 JSON 数据，结构如下：
             {
                success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                message : "提示的信息，上传成功或上传失败及错误信息等。",
                url     : "图片地址"        // 上传成功时才返回
             }
             */
		});
	});
</script>


<script>

	layui.use(['util', 'layer','form', 'formSelects'], function () {


		var util = layui.util;
		var form = layui.form;
		var formSelects = layui.formSelects;



		form.on('select(classify)', function (data) {
			let result = [];
			$.ajax({
				url: '/api/admin/classify/targets/query',
				type: 'post',
				data: JSON.stringify({'classify': data.value}),
				dataType: "json",
				contentType: 'application/json',
				success: function (response) {
					if (response.code === 1) {
						layer.alert(response.msg);
					} else {
						$.each(response.data, function (index, item) {
							result.push({"name": item.Name, "value": item.Id})
						});
						formSelects.data('select1', 'local', {
							arr: result
						});
					}
				}
			});

		});
		form.on('submit(submit)', function(data){
			$.ajax({
				url: '/api/admin/article/create',
				type: 'post',
				data: JSON.stringify(data.field),
				dataType: "json",
				contentType: 'application/json',
				success: function (response) {
					if (response.code === 1) {
						layer.alert(response.msg);
					} else {
						layer.msg("创建成功", {time: 2000});
						location.reload();
					}
				}
			});
			return false;
		});

	});
</script>
</body>
</html>